<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>邻阿姨(LAY.COM)-去哪买,超市比价,附近价差排行,邻居互助</title>
    <link rel="stylesheet" type="text/css" href="../js/cube-ui/cube.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/recommend201905271400.css"/>
</head>
<body>
    <div class="app-shell" id="recommend" v-cloak>
        <div class="recommend-main">
            <div class="recommend-header">
                <i class="recommend-goback" @click="goback()">返回</i>
                <span class="recommend-headerTitle">推荐商品</span>
            </div>

            <div class="recommend-container">
                <div class="recommend-goodsList" v-if="goodsData && goodsData.length > 0">
                    <cube-scroll
                        ref="goodsList"
                        :data="goodsData"
                        :options="scrollOptions"
                        @pulling-up="searchMore">
                        <ul>
                            <li class="recommend-goodsBox" v-for="(goods,index) in goodsData" :key="index">
                                <img :src="goods.image" class="recommend-goodsImg">
                                <div class="recommend-goodsInfo">
                                    <h3 class="recommend-goodsName">{{goods.fullName}}</h3>
                                    <p class="recommend-goodsDescribe">规格：{{goods.attrValues}}</p>
                                    <p class="recommend-goodsSpread">价差率：{{goods.spreadRate}}%</p>
                                    <div class="recommend-goodsPriceBox"><em class="recommend-goodsRMB">￥</em><span class="recommend-goodsPrice">{{goods.minPrice}}</span><div class="recommend-goodsTriangle" @click="morePrice($event,index)">比价</div></div>
                                    <a class="recommend-goodsBtn" @click="placeOrder(index)">立即下单</a>
                                </div>
                            </li>
                        </ul>
                    </cube-scroll>
                </div>
                <div class="recommend-noGoodsBox" v-else-if="goodsData && goodsData.length === 0">
                    <div class="recommend-noGoods">暂无商品</div>
                </div>
            </div>

            <cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">
                <div class="search-addCartBox">
                    <div class="search-addCartGoods" v-if="goodsData && goodsData.length > 0">
                        <img :src="goodsData[addCartIndex].image" class="search-addCartGoodsImg">
                        <div class="search-addCartGoodsInfo">
                            <h1 class="search-addCartGoodsName">{{goodsData[addCartIndex].fullName}}</h1>
                            <span class="search-addCartGoodsNorms">规格：{{goodsData[addCartIndex].attrValues}}</span>
                            <span class="search-addCartGoodsSpread">价差率：{{goodsData[addCartIndex].spreadRate}}%</span>
                            <div class="search-addCartGoodsPriceBox"><em class="search-addCartGoodsRMB">￥</em><span class="search-addCartGoodsPrice">{{goodsData[addCartIndex].minPrice}}</span></div>
                            <div class="search-addCartStep"><i class="search-addCartReduce" @click="reduce()"></i><span class="search-addCartNum">{{num}}</span><i class="search-addCartPlus" @click="plus()"></i></div>
                        </div>
                    </div>
                    <div class="search-btnAddCartBox">
                        <div class="search-btnAddCart" @click="addCart">加入购物车</div>
                        <div class="search-btnDirectBuy" @click="toBUy">直接购买</div>
                        <!-- <div class="search-btnAddCart" @click="addCart()">加入购物车</div> -->
                    </div>
                </div>
            </cube-popup>

            <div class="search-popupBox" v-show="showPopup">
                <div class="search-popupMask" @click="closePopup()"></div>
                <div class="search-popupContent" :style="popupTop" ref="searchPopup">
                    <i class="search-popupTriangleTop" :style="triangleStyle" v-if="popupTriangle === 'top'"></i>
                    <i class="search-popupTriangleBottom" :style="triangleStyle" v-else-if="popupTriangle === 'bottom'"></i>
                    <div class="search-popup" v-if="goodsData && goodsData.length > 0">
                        <div class="search-popupTitle">附近超市比价</div>
                        <div class="search-popupGoodsBox">
                            <div>
                                <img :src="goodsData[popupIndex].image" class="search-popupGoodsImg">
                                <p class="search-popupGoodsSpread">最高价差率</p>
                                <p class="search-popupGoodsOrange"><span class="search-popupGoodsBig">{{goodsData[popupIndex].spreadRate}}</span>%</p>
                            </div>
                            <div>
                                <div class="search-popupGoodsName">{{goodsData[popupIndex].fullName}}</div>
                                <div class="search-popupMarket">
                                    <ul>
                                        <li class="search-popupMarketList" v-for="(market,index) in marketData" :key="index"><span class="search-popupMarketName">{{market.supermarketName}}</span><span class="search-popupMarketPrice">{{market.price}}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/fetch20190612.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/cube-ui/cube.min.js"></script>
    <script src="js/recommend201905271400.js"></script>
</body>
</html>
